import EventEmitter from "@/eventEmitter";
import GraphBase from "../shape/graphBase";
import RectNodeGraph from "../shape/rect";
import EllipseNodeGraph from "../shape/ellipse";
import PolyLineNodeGraph from "../shape/polyline";
import BezierCurveNodeGraph from "../shape/bezierCurve";
import RectGraphProperty from "./rectProperty";
import EllipseGraphProperty from "./ellipseProperty";
import LineGraphProperty from "./lineProperty";
export default class Property extends EventEmitter {
  dom: HTMLElement;
  property:
    | LineGraphProperty
    | RectGraphProperty
    | EllipseGraphProperty
    | null = null;
  selectedObj: GraphBase | null = null;
  constructor() {
    super();
    this.dom = document.createElement("div");
    this.dom.classList.add("property");
  }
  changeSelected(selectedObj: GraphBase | null) {
    this.selectedObj = selectedObj;
    if (this.property) {
      this.property.destroy();
      this.property = null;
      this.dom.children[0].remove();
    }
    if (!selectedObj) {
      return;
    }
    this.onPropertyChange = this.onPropertyChange.bind(this);
    switch (selectedObj.type) {
      case "rect":
        this.property = new RectGraphProperty();
        this.property.init(selectedObj as RectNodeGraph);
        this.dom.appendChild(this.property.dom);
        this.property.on("propertyChange", this.onPropertyChange);
        break;
      case "ellipse":
        this.property = new EllipseGraphProperty();
        this.property.init(selectedObj as EllipseNodeGraph);
        this.dom.appendChild(this.property.dom);
        this.property.on("propertyChange", this.onPropertyChange);
        break;
      case "polyline":
      case "bezier":
        this.property = new LineGraphProperty();
        this.property.init(
          selectedObj.type === "polyline"
            ? (selectedObj as PolyLineNodeGraph)
            : (selectedObj as BezierCurveNodeGraph)
        );
        this.dom.appendChild(this.property.dom);
        this.property.on("propertyChange", this.onPropertyChange);
        break;
    }
  }
  changeProperty() {
    if (this.property && this.selectedObj) {
      this.property.setOption(this.selectedObj as any);
    }
  }
  onPropertyChange(changeObj: { propertyName: string; propertyValue: any }) {
    this.emit("propertyChange", changeObj);
  }
}
